import React, {useEffect, useState} from 'react';
import {listMyChartVoByPageUsingPost} from "@/services/mybi/chartController";
import {Avatar, Card, List, message, Input, Divider, Result} from "antd";
import EChartsReact from "echarts-for-react";
import {useModel} from "@umijs/max";
import {SearchProps} from "antd/lib/input";
import {Link} from "umi";

const {Search} = Input;

const MyChartPage: React.FC = () => {
  const initSearchParams = {
    pageSize: "4",
    current: "1",
  }
  const [searchParams, setSearchParams] = useState<API.ChartQueryRequest>
  ({...initSearchParams});

  // 登陆的时候用户状态存入了这里
  const {initialState} = useModel("@@initialState")
  const {currentUser} = initialState ?? {}

  const [charList, setCharList] = useState<API.ChartVO[]>([])
  const [total, setTotal] = useState<string>("0")

  const loadData = async () => {
    try {
      const res = await listMyChartVoByPageUsingPost(searchParams);
      if (res.data) {
        setCharList(res?.data?.records ?? [])
        setTotal(res?.data?.total ?? "0")
      } else {
        message.error("请求数据为空")
      }

    } catch (e: any) {
      message.error("获取图表失败", e)
    }
  }

  const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
    console.log(info?.source, value);
    setSearchParams({...searchParams, current: "1", pageSize: "4", name: value})
  }

  useEffect(() => {
    loadData()
  }, [searchParams])

  // @ts-ignore
  // @ts-ignore
  return (
    <div className={"my-chart-page"}>

      <Search placeholder="input search text" onSearch={onSearch} enterButton/>

      <Divider/>
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 1,
          md: 1,
          lg: 2,
          xl: 2,
          xxl: 2,
        }}
        pagination={{
          onChange: (page, pageSize) => {
            setSearchParams({
              ...searchParams,
              pageSize: pageSize.toString(),
              current: page.toString(),
            })
          },
          pageSize: parseInt(searchParams.pageSize ?? '5'),
          current: parseInt(searchParams.current ?? '1'),
          total: parseInt(total ?? '1'),
        }}
        dataSource={charList}
        renderItem={(item) => (
          <Card style={{width: '100%', height: '600px'}}>
            <List.Item
              style={{margin: "50px"}}
              key={item.id}
            >
              <List.Item.Meta
                avatar={<Avatar src={currentUser?.userAvatar}/>}
                title={item.name}
                description={item.chartType ? '图表类型' + item.chartType : undefined}
              />
              <>
                {
                  item.status === 2 && <>
                    <div style={{marginBottom: 16}}></div>
                    <p>{'分析目标：' + item.goal}</p>
                    <div style={{marginBottom: 16}}></div>
                    <EChartsReact option={JSON.parse(item.genChart ?? '{}')}/>
                    <Link to={""}>{'分析结论' + item.genResult}</Link>
                  </>
                }
                {
                  item.status === 3 && <>
                    <Result
                      status={"error"}
                      title={"分析失败"}
                      subTitle={"分析失败原因：" + item.execMessage}
                    ></Result>
                  </>
                }
                {
                  item.status === 1 && <>
                    <Result
                      status={"info"}
                      title={"任务执行中"}
                      subTitle={item.execMessage}
                    ></Result>
                  </>
                }
                {
                  item.status === 0 && <>
                    <Result
                      status={"info"}
                      title={"任务等待中"}
                      subTitle={item.execMessage}
                    ></Result>
                  </>
                }
              </>
            </List.Item>
          </Card>
        )}
      />
    </div>
  );
};
export default MyChartPage;
